@import "compass/css3";
a:link,a:visited,a:hover,a:active{ text-decoration: none;}
@font-face{font-family:'FontAwesome';src:url('./fontawesome-webfont.eot?v=3.2.1');src:url('./fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('./fontawesome-webfont.woff?v=3.2.1') format('woff'),url('./fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('./fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}
body{
  background: #EEEEEE;
}
.ayi-navbar-top{ background: #fff; padding:8px 0px; height: 60px; margin: 0px; border-bottom: 1px solid #e3e3e3}
.ayi-navbar{
  .ayi-navbar-left{
    display: flex;width: 220px; margin-left: 10px;
  }
  .ayi-navbar-right{
    padding-right: 20px;width: calc(100% - 230px);
    .ayi-page-title{
      font-size: 1.462rem; padding: 0 20px 0px 10px; display: inline-block;
    }
    .ayi-nav-menu{
      display: none;
    }

  }
  .ayi-nav-user  > li.ayi-dropdown > a img{
    max-width: 32px;max-height: 32px;border-radius: 50%;
  }
  .ayi-nav-other{
    height: 30px; line-height: 30px; display: block; float: right;
    li{
      margin-right: 10px; width: 20px; float: left;
    }
  }
}
.ayi-left-sidebar{height: 100%;margin-top: 61px;padding-bottom: 61px;position: fixed;top: 0;bottom: 0;z-index: 1029;
  background-color: #f5f5f5;width: 230px;left: 0;border-right: 1px solid #e3e3e3;
  &:before{
    content: "";position: fixed;z-index: -1;width: inherit;top: 60px;left: 0;bottom: 0;background-color: inherit;border-right: 1px solid #e3e3e3;
  }
  .ayi-left-sidebar-wrapper{
    display: table;table-layout: fixed;width: 100%;height: 100%;
    .ayi-left-sidebar-content{
      position: absolute;top:0px; bottom: 0px; left: 0px; right: 0px; padding-top: 8px;
    }
  }
  .ayi-sidebar-elements{
    line-height: 20px; padding: 0px; margin: 0px;
   > li{
      list-style: none;
     &.ayi-divider{
       padding: 20px 20px 0;color: #b0b0b0;line-height: 30px;font-weight: 600;text-transform: uppercase;font-size: .8462rem;
     }
     & > a{
       display: block; padding: 0 20px;color: #646464;font-size: 1.077rem;line-height: 38px; text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
     }
     &.active > a{
       padding-left: 20px;font-weight: 500;color: #4285f4;
       span{
         color: #4285f4;
       }
     }
     &.active li.active a{
       color: #4285f4;
     }
     > ul{
       border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;
     }
     ul{
       display: none;background-color: #eeeeee;padding: 10px 0;list-style: none; line-height: 20px;
       li{
         > a{
           padding: 8px 15px 8px 49px;color: #646464; font-size: 13px;display: block; text-overflow: ellipsis;overflow: hidden; white-space: nowrap;
         }
         ul{
            padding: 0px;
         }
         > ul > li > a{
           /*第二级菜单*/
           padding-left: 60px;
         }
        > ul > li >  ul > li > a{
          /*第三级菜单*/
          padding-left: 70px;
        }
       }
     }
    }
    li{
      &.ayi-parent-menu > a:before{
        content: '\f0d7';float: right; font-family: "FontAwesome"; font-size: 1.615rem; color: #c5c5c5;
      }
      &.ayi-parent-menu.open > a:before{
        content: '\f0d8';
      }
      &.open > ul{
        display: block;
      }
    }
  }
}
.ayi-right-content{
  position: relative;left: 0;margin-left: 230px;min-height: 100%; padding-top: 60px;
  .ayi-main-contain{
      padding: 30px;
  }
}

//小于768px
@media (max-width: 768px) {
  .ayi-navbar{
    .ayi-navbar-left{
      display: none;
    }
    .ayi-navbar-right{
      width: 100%;
      .ayi-nav-title{
        display: none;
      }
      .ayi-nav-menu{
        display: block;
      }
    }
  }
  .ayi-left-sidebar{
     height: auto; display: none;
  }
  .ayi-right-content{
    margin-left: 0px;
  }
}
@media (min-width: 768px) {
  .ayi-left-sidebar{
    display: block !important;
  }
}